<template>
<div class='container'>
    <!-- 卡片主页 -->
  <el-card class="box-card">
    <!-- 面包屑区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" v-if="subjects.id && subjects.name">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ subjects.id ? subjects.name : '' }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
    </el-breadcrumb>
      <!-- 主体内容区域 -->
    <div class="card-body">
      <!-- 标签输入区域 -->
      <el-row>
        <!-- 左侧 -->
        <el-col :span="18">
          <div class="grid-content bg-purple">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="标签名称" class="item-name">
                  <el-input class="input-inner" v-model="formInline.name"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="formInline.state">
                    <el-option label="启用" value="启用"></el-option>
                    <el-option label="禁用" value="禁用"></el-option>
                  </el-select>
                </el-form-item>
                <!-- 表单按钮区域 -->
                <el-form-item>
                  <el-button @click="eliminate">清除</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="search">搜索</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>

          <!-- 右侧按钮 -->
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <el-button type="success" @click="addLabel">
                <i class="el-icon-edit"></i>
                <span>新增标签</span>
              </el-button>
            </div>
          </el-col>
        </el-row>
        <!-- 数据统计区域 -->
        <el-row class="rownumber">
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark"></div>
            <span class="number-icon">
              <i class="el-alert__icon el-icon-info"></i>
              数据一共{{ total }}条
            </span>
          </el-col>
           <!-- 表格区域 -->
          <el-col :span="24">
            <div class="grid-content bg-purple-dark"></div>
                  <template>
          <el-table :data="tableData"  style="width: 100%" row-key="id">
            <el-table-column
              label="序号"
              width="80"
              prop="id"
              type="index"
            ></el-table-column>
            <el-table-column
              label="所属学科"
              width="180"
              prop="subjectName"
            ></el-table-column>
            <el-table-column
              label="标签名称"
              width="180"
              prop="tagName"
            ></el-table-column>
            <el-table-column
              label="创建者"
              width="180"
              prop="username"
            ></el-table-column>
            <el-table-column label="创建日期" width="180" prop="addDate">
              <template slot-scope="scope">
                <span>{{ scope.row.addDate | formatTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="240" prop="state">
              <template slot-scope="scope">
                {{ scope.row.state === 1 ? "已禁用" : "已启用" }}
              </template>
            </el-table-column>
            <el-table-column label="操作" >
              <template #default="scope">
                <el-button type="text" @click="btnclick(scope.row)">{{
                  scope.row.state === 1 ? "启用" : "禁用"
                }}</el-button>
                <el-button
                  type="text"
                  @click="modifyData(scope.row)"
                  :disabled="scope.row.state === 1 ? true :  false"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  @click="delData(scope.row)"
                  :disabled="scope.row.state === 1 ? true :  false"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
          </el-col>
        </el-row>

        <!-- 分页区域 -->
        <div class="block">
          <el-pagination
            class="el-pagination page-size"
            background
            @size-change="handleSizeChange"
            :page-sizes="[10, 15, 20, 25]"
            @current-change="handleCurrentChange"
            layout=" prev, pager, next, sizes, jumper"
            :current-page="query.page"
            :total="total"
            :page-size="query.size"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 新增/修改弹框组件 -->
      <div>
        <tags-dialog
          :isEdit="isEdit"
          :show-dialog="showDialog"
          @closeDialog="showDialog = false"
          @updata-list="getList"
          ref="tagsDialog"
        >
        </tags-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
// 导入Api
import { list, changeState, remove } from '@/api/hmmm/tags.js'
// 导入组件
import tagsDialog from '../components/tags-add.vue'
// 导入日期转换工具
import dayjs from 'dayjs'
export default {
  name: 'tags',
  data () {
    return {
      // 顶部表单数据对象
      formInline: {
        name: '', // 输入框
        state: '' // 下拉菜单
      },
      // 表格区域数据
      tableData: [],
      // 分页组件数据对象
      query: {
        page: 1, // 页码
        size: 10 // 每页数据条数
      },
      total: 0, // 数据总数
      showDialog: false, // 控制弹框组件显示
      isEdit: false // 控制新增或修改状态
    }
  },
  computed: {
    subjects () {
      return this.$route.query || null
    }
  },
  watch: {
    '$route.query' () {
      this.getList()
    }
  },
  components: {
    tagsDialog
  },
  filters: {
    // 格式化时间的方法
    formatTime (time) {
      // 当前项没有日期，直接返回
      if (!time) return
      return dayjs(time).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  created () {
    // 调用获取标签列表数据方法
    this.getList()
  },
  methods: {
    // 获取标签列表数据
    async getList () {
      const res = await list(this.query)
      this.tableData = res.data.items
      // 给数据总数赋值
      this.total = res.data.counts
    },
    // 清除按钮
    eliminate () {
      // 清空输入框和下拉表单数据
      this.formInline.name = null
      this.formInline.state = null
    },
    // 搜索按钮
    async search () {
      // 调用获取标签列表数据方法
      const res = await list({
        tagName: this.formInline.name,
        state: this.formInline.state === '启用' ? 1 : 0
      })
      // 渲染搜索出的数据
      this.tableData = res.data.items
      this.total = res.data.counts
      this.query.page = res.data.page
    },
    // 新增按钮
    addLabel () {
      // 调用子组件清空方法
      this.$refs.tagsDialog.clearFrom()
      this.isEdit = false
      this.showDialog = true
    },
    // 表格的状态
    async btnclick (row) {
      const res = await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      if (res.status === 200) {
        row.state = row.state === 1 ? 0 : 1
        this.$message.success('操作成功')
      }
    },
    // 表格的修改
    modifyData (row) {
      this.isEdit = true
      this.showDialog = true
      // 数据回显
      this.$refs.tagsDialog.tagsForm = row
    },
    // 表格的删除
    async delData (row) {
      // 删除提示
      const confRes = await this.$confirm(
        '此操作将永久删除该数据, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confRes === 'cancel') return this.$message.info('已取消删除')
      const res = await remove(row)

      if (res.status === 200) {
        this.$message.success('删除成功')
        this.getList()
      }
      // 删除数据判断
      if (this.tableData.length === 1) {
        this.query.page--
        if (this.query.page <= 0) {
          this.query.page = 1
        }
      }
    },
    // 每页数据条数改变时触发
    handleSizeChange (newSize) {
      this.query.size = newSize
      this.getList()
    },
    // 当前页改变时触发
    handleCurrentChange (newCurrent) {
      this.query.page = newCurrent
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 10px;
}
.card-body {
  padding: 5px;
}
.box-card {
  border-radius: 5px;
}
.page-size {
  margin: 15px 0px;
}
.el-breadcrumb {
  margin-bottom: 10px;
}
.bg-purple-light {
  float: right;
}
.el-pagination {
  float: right;
}
.input-inner {
  height: 30px;
  line-height: 30px;
}

.el-input {
  height: 32px;
  line-height: 32px;
}

.rownumber {
  width: 100%;
  background-color: #f4f4f5;
  height: 35px;
  line-height: 35px;
  border-radius: 5px;
  .number-icon {
    font-size: 13px;
    color: #909399;
    .el-icon-info {
      margin: 0px 10px;
    }
  }
}
</style>
